<template>
	<view class="category">
		<view class="category-wrapper" v-if="catrgoryList.length > 0">
			<!-- 左边导航 -->
			<scroll-view scroll-y="true" class="left-wrapper" scroll-with-animation="true" :scroll-top="left_scroll">
				<view class="left-content">
					<view class="title-content" :class="select_index === index ? 'onSelected' : ''" v-for="(title, index) in catrgoryList" :key="title.id" @tap="choose(index)">
						{{ title.name }}
					</view>
				</view>
			</scroll-view>
			<!-- 右边内容 -->
			<scroll-view scroll-y="true" class="right-wrapper" scroll-with-animation="true" :scroll-top="right_scroll" @scroll="myscroll">
				<view class="right-content">
					<!-- banner区域 -->
					<view class="banner-wrapper">
						<swiper class="swiper-content" :autoplay="true" :interval="3000" :circular="true">
							<swiper-item class="swiper-item" v-for="imgs in swiperList" :key="imgs.id"><image class="swiper-img" :src="imgs.src"></image></swiper-item>
						</swiper>
					</view>
					<!-- 产品区 -->
					<view class="product-wrapper">
						<view class="category-item" :id="'list' + c_index" v-for="(c_item, c_index) in catrgoryList" :key="c_item.id">
							<view class="category-title" v-on:tap="goProduct({c1:0,c2:c_item.id,c3:0})">{{ c_item.name }}</view>
							<view class="category-content">
								<view class="product-item" v-for="(p_item, p_index) in c_item.content" :key="p_item.id">
									<image class="product-img" :src="p_item.thumb" v-on:tap="goProduct({c1:0,c2:0,c3:p_item.cid})"></image>
									<text class="product-title" v-on:tap="goProduct({c1:0,c2:0,c3:p_item.cid})">{{ p_item.cname }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
import jsonData from '@/Json.js';
export default {
	data() {
		return {
			windows_height: 0, //屏幕高度
			swiperList: [],
			catrgoryList: [],
			select_index: 0,
			right_height: [], //右侧每个内容的高度集合
			right_scroll: 0, //右侧的滑动值
			left_height: 0, //左侧总高度
			left_scroll: 0, //左侧滑动值
			last: 0
		};
	},
	onLoad() {
		this.getEcateListJS();
		this.getbannerJS();
		this.windows_height = uni.getSystemInfoSync().windowHeight;
	},
	methods: {
		...mapActions(['getEcateList','AD']),
		getEcateListJS() {
			this.getEcateList()
			.then(res=>{
				this.catrgoryList = res.list;
				// this.swiperList = res.banner;
				this.$nextTick(() => {
					this.getHeightList();
				})
			})
			
			
		},
		getbannerJS(){
			this.AD({'id':1})
			.then(res=>{
				console.log('分类数据',res)
				this.swiperList = res;
			})
		},
		getHeightList() {
			let _this = this;
			let selectorQuery = uni.createSelectorQuery();
			selectorQuery.select('.left-content').boundingClientRect(function(rects) {
				_this.left_height = rects.height;
			});
			selectorQuery
				.selectAll('.category-item')
				.boundingClientRect(function(rects) {
					_this.right_height = rects.map(item => item.top);
					console.log(_this.right_height);
				})
				.exec();
		},
		choose(index) {
			if (this.select_index === index) {
				return;
			}
			this.select_index = index;
			// 加入防抖
			if (this.timeout) {
				clearTimeout(this.timeout); //清除计时器
			}
			this.timeout = setTimeout(() => {
				this.right_scroll = this.right_height[index] - 110;
			}, 300);
		},
		myscroll(e) {
			//引入节流
			let right_content_height = e.detail.scrollHeight - this.windows_height;
			if (right_content_height == e.detail.scrollTop) {
				return;
			}
			let scroll_top = e.detail.scrollTop + 110; //110是banner图的高度
			//判断当前的scrollTop在哪个区间内;
			let now = +new Date();
			if (now - this.last > 100) {
				this.last = now;
				let active_index = this.right_height.findIndex((value, index, arr) => value <= scroll_top && scroll_top < arr[index + 1]);
				this.select_index = active_index;
				if (this.left_height - this.windows_height) {
					//如果有超出部分
					let diff = this.left_height - this.windows_height;
					this.left_scroll = Math.round((active_index * diff) / (this.catrgoryList.length - 1));
				}
			}
		},
		// 跳转页
		goProduct(e){
			uni.navigateTo({
			    url: '/pages/product/list?c1='+ e.c1+'&c2='+ e.c2+'&c3='+e.c3 +''
			});
		}
	}
};
</script>

<style lang="less">
.category {
	.category-wrapper {
		width: 100%;
		display: flex;
		flex-direction: row;
		position: absolute;
		top: 0;
		bottom: 0;

		.left-wrapper {
			width: 200rpx;
			flex: 0 0 200rpx;
			background-color: #f6f6f6;

			.left-content {
				.title-content {
					width: 100%;
					height: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 25rpx;
					border-bottom: 1px solid #dedede;
					cursor: pointer;

					&:last-child {
						border-bottom: 0;
					}

					&.onSelected {
						background-color: #fff;
						position: relative;
						color: #feb436;

						&::before {
							content: '';
							position: absolute;
							left: 0;
							top: 0;
							width: 10rpx;
							height: 100%;
							background: linear-gradient(124deg, #feb436 0%, #fb7c22 100%);
						}
					}
				}
			}
		}

		.right-wrapper {
			flex: 1;

			.right-content {
				width: 100%;
				padding: 20rpx 0;
				border-left: 1rpx solid #efefef;
				box-sizing: border-box;

				.banner-wrapper {
					padding: 0 20rpx;

					.swiper-content {
						width: 100%;
						height: 180rpx;
						margin-bottom: 20rpx;

						.swiper-item {
							.swiper-img {
								width: 100%;
								height: 180rpx;
							}
						}
					}
				}

				.product-wrapper {
					.category-item {
						.category-title {
							height: 60rpx;
							font-size: 26rpx;
							line-height: 60rpx;
							font-weight: 500;
							background-color: #f6f6f6;
							padding-left: 20rpx;
							color: #000;
						}

						.category-content {
							display: flex;
							flex-direction: row;
							flex-flow: wrap;
							padding: 20rpx 20rpx 0;

							.product-item {
								width: 33%;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								margin-bottom: 20rpx;

								.product-img {
									width: 120rpx;
									height: 140rpx;
									margin-bottom: 10rpx;
								}

								.product-title {
									font-size: 23rpx;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
